<template>
  <div :style="style1" class="sea-mark-triangle">
    <i :style="style3"></i>
    <div :style="style2">
      <slot><i :class="props.icon"></i></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";

/**
 * 三角形角标
 *
 * 一个非常好用的提示组件
 *
 * 注意：
 * - 参数不做侦听，更改入参内容不会有任何变化
 * - 角标未设置位置信息，需要外部调整，有默认的 class-name 设计
 *
 * @example
 * ```
 * style="position: absolute;top: 0; right: 0;color: #f4f4f4;font-size: 16px;"
 * ```
 */
interface Props {
    // 基础尺寸
    size?: number | string
    // 图标
    icon?: string
    // 三角形 - 颜色
    color?: string
    // 三角形 - 透明度
    opacity?: number | string
}

const props = withDefaults(defineProps<Props>(), {
    size: 100,
    icon: '',
    color: 'red',
    color: 'green',
    opacity: 0.5
})

// 文字大小
const textSize = props.size * 0.6;
// 角标大小
const arrowSize = props.size * 0.5;

// 容器样式
const style1 = {
    width: `${props.size}px`,
    height: `${props.size}px`
}

// 文本框
const style2 = {
    top: '0',
    right: '0',
    textAlign: 'center',
    position: 'absolute',
    width: `${textSize}px`,
    height: `${textSize}px`,
    lineHeight: `${textSize}px`
}

// 角标
const style3 = {
    position: 'absolute',
    top: '0',
    right: '0',
    width: '0',
    height: '0',
    opacity: props.opacity.toString(),
    borderLeft: `${arrowSize}px solid transparent`,
    borderRight: `${arrowSize}px solid ${props.color}`,
    borderTop: `${arrowSize}px solid ${props.color}`,
    borderBottom: `${arrowSize}px solid transparent`,
}
</script>
